import React from 'react';
import { View, Text, StyleSheet, ScrollView, Pressable } from 'react-native';
import { COLORS } from '../styles/constants';

export default function CategoryChips({ categories = [], selected, onSelect }) {
  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={styles.container}
    >
      <View style={styles.edgeSpacer} />
      {categories.map((cat, idx) => {
        const active = cat === selected;
        return (
          <Pressable
            key={cat}
            onPress={() => onSelect?.(cat)}
            style={[styles.chip, active && styles.chipActive]}
          >
            <Text style={[styles.chipText, active && styles.chipTextActive]}>
              {cat}
            </Text>
          </Pressable>
        );
      })}
      <View style={styles.edgeSpacer} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingVertical: 8,
  },
  edgeSpacer: {
    width: 16,
  },
  chip: {
    backgroundColor: COLORS.background.secondary,
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 16,
    marginRight: 8,
  },
  chipActive: {
    backgroundColor: COLORS.primaryLight,
    borderWidth: 1,
    borderColor: COLORS.primarySoft,
  },
  chipText: {
    fontSize: 13,
    color: COLORS.text.secondary,
  },
  chipTextActive: {
    color: COLORS.primary,
    fontWeight: '600',
  },
});
